<template>
  <el-row style="margin-top:20px;position:relative;">
    <el-col :span="3">
      <div class="grid-content bg-purple"></div>
    </el-col>
    <el-col :span="18">
      <el-row style="margin-top:10px">
        <el-col :span="16">
          <div class="videoPaly" style="background-color:white">
            <div class="live_top" style="padding: 20px">
              <div style="float:left;">
              <span style="font-size: 16px;font-weight: 500;color: #414a60;">
                java的起源
              </span>
                <div style="font-size: 13px;color: #414a60;line-height: 20px; margin-top: 8px">
                  发布时间：<span>2022-01-12 12:45:00</span>
                </div>
              </div>
            </div>
            <div id="live" >
            </div>
            <div style="padding:20px">
              <el-descriptions :column="2" title="课程介绍">
                <el-descriptions-item label="主讲人">陈磊</el-descriptions-item>
                <el-descriptions-item label="担任职位">前京东架构</el-descriptions-item>
                <el-descriptions-item label="章节">前京东架构</el-descriptions-item>
                <el-descriptions-item label="购买数量">999人</el-descriptions-item>
                <el-descriptions-item label="课程内容">
                  销售经验，突破和掌握了大量汽车电子及底盘技术，并以优质的成本实现产业化。
                  销售经验，突破和掌握了大量汽车电子及底盘技术，并以优质的成本实现产业化。
                  销售经验，突破和掌握了大量汽车电子及底盘技术，并以优质的成本实现产业化。
                  销售经验，突破和掌握了大量汽车电子及底盘技术，并以优质的成本实现产业化。
                  销售经验，突破和掌握了大量汽车电子及底盘技术，并以优质的成本实现产业化。
                  销售经验，突破和掌握了大量汽车电子及底盘技术，并以优质的成本实现产业化。
                  销售经验，突破和掌握了大量汽车电子及底盘技术，并以优质的成本实现产业化。
                  销售经验，突破和掌握了大量汽车电子及底盘技术，并以优质的成本实现产业化。
                  销售经验，突破和掌握了大量汽车电子及底盘技术，并以优质的成本实现产业化。
                </el-descriptions-item>
              </el-descriptions>
            </div>
          </div>
          <div style="margin-top: 10px;background-color: white;padding: 20px;">
            <span style="font-size:18px;color: #606266;">评论区</span>
            <span><el-button style="float: right" type="primary" size="mini">发表评论</el-button></span>
            <el-divider direction="horizontal"></el-divider>
            <div class="article_item">
              <div class="item_top">
                <div class="publish_user">
                  <el-avatar style="width:30px;height:30px;vertical-align: middle"
                             src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
                  <span class="publish_name">牛客278890698号</span>
                </div>
              </div>
              <div class="content">
                <div class="publish_content">暑期实习的求职总算到了尾声了，自己在决赛圈终于收获了网易云的offer，
                  自己在决赛圈终于收获了网易云的offer，自己在决赛圈终于收获了网易云的offer，自己在决赛圈终于收获了网易云的offer，
                  自己在决赛圈终于收获了网易云的offer，焦虑清零！ 双非硕，3.3写完小论文开始准备面试相关的内容，这时和师兄的交流才知道，
                  最好三月中旬之前能投简历，因为有些大厂流程比较慢
                </div>
                <div class="publish_detail">
                  <span><i class="iconfont icon-good">19</i></span>
                  <span style="padding-left:15px;"><i class="iconfont icon-comment">10</i></span>
                  <span style="float:right">评论于 2022-05-16 12:35</span>
                </div>
                <el-divider direction="horizontal"></el-divider>
              </div>
            </div>
            <div class="article_item">
              <div class="item_top">
                <div class="publish_user">
                  <el-avatar style="width:30px;height:30px;vertical-align: middle"
                             src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
                  <span class="publish_name">牛客278890698号</span>
                </div>
              </div>
              <div class="content">
                <div class="publish_content">暑期实习的求职总算到了尾声了，自己在决赛圈终于收获了网易云的offer，
                  自己在决赛圈终于收获了网易云的offer，自己在决赛圈终于收获了网易云的offer，自己在决赛圈终于收获了网易云的offer，
                  自己在决赛圈终于收获了网易云的offer，焦虑清零！ 双非硕，3.3写完小论文开始准备面试相关的内容，这时和师兄的交流才知道，
                  最好三月中旬之前能投简历，因为有些大厂流程比较慢
                </div>
                <div class="publish_detail">
                  <span><i class="iconfont icon-good">19</i></span>
                  <span style="padding-left:15px;"><i class="iconfont icon-comment">10</i></span>
                  <span style="float:right">评论于 2022-05-16 12:35</span>
                </div>
                <el-divider direction="horizontal"></el-divider>
              </div>
            </div>
            <el-pagination
                background
                layout="prev, pager, next"
                :total="total"
                align="center"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-size="pageSize"
                :hide-on-single-page="value"
                style="padding-top: 15px"
            >
            </el-pagination>
          </div>

        </el-col>
        <el-col :span="8">
          <div class="hot_article">
            <div class="choice">
              <span style="font-size:18px;color: #606266;">课程章节</span>
              <el-divider direction="horizontal"></el-divider>
              <div class="choice_title">
                <span class="choice_index">
                  1<span>.</span>1
                </span>
                <span>
                  java的起源
                </span>
              </div>
              <div class="choice_title">
                <span class="choice_index">
                  1<span>.</span>1
                </span>
                <span>
                  java的起源
                </span>
              </div>

            </div>
          </div>
        </el-col></el-row>

    </el-col>
    <el-col :span="3">
      <div class="grid-content bg-purple">
      </div>
    </el-col>
  </el-row>
</template>

<script>
export default {
  name: "Course",
  data(){
    return{
      value:false,
      currentPage:1,
      total:1000,
      pageSize:30,
    }
  },
  methods:{
    handleCurrentChange(currentPage){
      this.currentPage = currentPage;
    }
  }
}
</script>

<style scoped>
.section{
  width:130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.grid-content {
  min-height: 50px;
  color: white;
  font-size: 14px;
}

.hot_article {
  width: 97.5%;
  height: 520px;
  overflow:auto;
  background-color: white;
  margin-left: 10px;
}

.choice {
  padding: 10px 20px 0 20px;
  background-color:white;
}

#live{
  height:440px;width:100%;background-color:black;clear:both;margin-top:40px
}
/deep/ .el-textarea__inner{
  resize:none;
  height:110px;
  background-color: #f3f5fa;
}

.sub-li {
  height: 90px;
  width: 100%;
  padding: 16px 0 0 ;
  box-sizing: border-box;
  background-color: white;
}

p {
  margin: 0 0;
}

.name {
  display: inline-block;
  font-size: 15px;
  color: #414a60;
  width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.salary {
  width: 40%;
  text-align: right;
  display: inline-block;
  color: #fc6c38;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.company {
  height: 30px;
}

.job-text {
  height: 28px;
  line-height: 28px;
  font-size: 13px;
  color: #8d92a1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.el-divider--horizontal {
  height: 0.5px;
  margin: 8px 0 12px 0;
}

.company_name {
  display: inline-block;
  margin: 0 20px 0 10px;
  color: #61687c;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  height: 30px;
  line-height: 30px;
}

.company_industry {
  display: inline-block;
  height: 30px;
  line-height: 30px;
  font-size: 13px;
  color: #8d92a1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.choice {
  padding: 10px 20px 0 20px;
}

.publish_name {
  color: cornflowerblue;
}

.publish_user {
  display: inline-block;
  height: 30px;
}

.publish_name {
  position: relative;
  top: 3px;
  padding-left: 5px;
}

.publish_category {
  font-size: 14px;
  position: relative;
  top: 8px;
  color: #8a8a8a;
  float: right;
}

.publish_title {
  font-size: 16px;
  font-weight: bold;
  margin-top: 7px;
}

.publish_content {
  margin-top: 5px;
  color: #8a8a8a;
  font-size: 14px;
  height: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  /* 限制在一个块元素显示的文本的行数 */
  /* -webkit-line-clamp 其实是一个不规范属性，使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；*/
  -webkit-line-clamp: 3;
  /* 设置或检索伸缩盒对象的子元素的排列方式 */
  -webkit-box-orient: vertical;
}
.choice_title{
  width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  height:25px;
  line-height: 25px;
  color: #432;
}
.publish_detail {
  color: #8a8a8a;
  margin-top: 5px;
  font-size: 14px;
}

.article_item {
  margin-bottom: 20px;
  cursor: pointer;
}

.article_item .el-divider--horizontal {
  height: 0.5px;
  margin: 20px 0 5px 0;
}
</style>